<script setup lang="ts">
// 被选中switch => true 为 纹理console ，false 为名词console
const selectedOption = ref<string>("true");
</script>

<template>
  <div class="CtlCard2">
    <SwitchBtn1 class="CtlCard2_1" v-model="selectedOption" />
    <div class="CtlCard2_content">
      <transition name="fade">
        <TextureCard class="CtlCard2_2" v-if="selectedOption == 'true'" />
      </transition>
      <transition name="fade">
        <NounCard class="CtlCard2_3" v-if="selectedOption == 'false'" />
      </transition>
    </div>
  </div>
</template>

<style scoped>
.CtlCard2 {
  display: flex;
  position: relative;
  width: 95%;
  height: 100%;
  background: rgba(198, 198, 198, 0.34);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.44);
  border-left: 2px rgba(255, 255, 255, 0.545) outset;
  box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  color: white;
}

.CtlCard2_content {
  display: flex;
  position: relative;
  margin-top: 2%;
  width: 100%;
  height: 94.5%;
}

.CtlCard2_1 {
  z-index: 3;
}
.CtlCard2_2 {
  z-index: 2;
}
.CtlCard2_3 {
  z-index: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
